<!--用户中心 class="color-theme-red" -->
<template>
  <f7-page style="background-color: #f4f5f5;" ptr @ptr:refresh="loadMore2" class="color-theme-red">
    <f7-navbar title="个人中心">
      <f7-link class="right" icon-f7="settings" href="/system/settingList/"></f7-link>
    </f7-navbar>
    <f7-list class="margin-top" media-list>

      <f7-list-item mediaItem chevron-center style="line-height: 30px;"
              link="/user/userHome/"
              title="A-david大卫"
              subtitle="积分：100">
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60" style="border-radius: 50%;"/>
      </f7-list-item>
      <f7-list-item mediaItem chevron-center style="line-height: 30px;color:var(--f7-theme-color);"
                    link="/login/login/"
                    title="登录/注册"
                    subtitle="注册享更多功能">
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="60" style="border-radius: 50%;"/>
      </f7-list-item>

<!--      <f7-list-item title="谁看过我" badge="5"  badge-color="red" link="#">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30" />
      </f7-list-item>
      <f7-list-item title="我的粉丝" badge="5" badge-color="red" link="#">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30" />
      </f7-list-item>
      <f7-list-item title="关注" badge="5" badge-color="red" link="#">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30" />
      </f7-list-item>
      <f7-list-item title="评价" badge="5" badge-color="red" link="#">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30" />
      </f7-list-item>
      <f7-list-item title="收藏" badge="5" badge-color="red" link="#">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30" />
      </f7-list-item>-->

    </f7-list>

    <f7-row style="margin-top: -10px;" >

        <!--访客暂隐藏-->
<!--      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link tab-link="#tab-2">
            <div>
              <div>
                8
              </div>
              <span>访客</span>
            </div>
          </f7-link>
        </div>
      </f7-col>-->

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/user/fansList/">
            <div>
              <div>
                89
              </div>
              <span>粉丝</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/user/fansList/">
            <div>
              <div>
                33
              </div>
              <span>关注</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/comment/receiveCommentList/">
            <div>
              <div>
                22
              </div>
              <span>评价</span>
            </div>
          </f7-link>
        </div>
      </f7-col>
      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/user/collectList/" >
            <div>
              <div>
                666
              </div>
              <span>收藏</span>
            </div>
          </f7-link>
        </div>
      </f7-col>
    </f7-row>

    <f7-list style="margin-top: 16px;">
      <f7-list-item title="发起新聚会" badge="+" badge-color="red" link="/activity/actAdd/">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
      <f7-list-item title="我发起的聚会" badge="5" badge-color="red" link="/activity/publishActList/">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
      <f7-list-item title="已参与" badge="5" badge-color="red" link="/activity/alreadyActList/">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
<!--      <f7-list-item title="退票" badge="5" badge-color="red" link="/activity/refundActList/">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>-->
      <f7-list-item title="去写评价" badge="new" badge-color="red" link="/comment/canCommentActList/">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
    </f7-list>

    <f7-list style="margin-top: -20px;">
<!--      <f7-list-item link="/advertise/selectAd/" title="平台合作" after="推广赞助">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>-->
      <f7-list-item link="/user/appearanceMark/" title="颜值在线检测" after="推荐有奖">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
      <!--<f7-list-item link="#" title="推荐有奖" after="">
        <f7-icon slot="media" icon="demo-list-icon"></f7-icon>
      </f7-list-item>-->
      <f7-list-item link="/system/feedback/" title="意见反馈" after="感谢您的建议">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="30"/>
      </f7-list-item>
      <f7-list-item link="/system/settingList/" title="系统设置" after="">
        <f7-icon slot="media" f7="settings"></f7-icon>
      </f7-list-item>
    </f7-list>

  </f7-page>
</template>

<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
      };
    },
    methods: {
      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },
      loadMore2(event, done) {

        setTimeout(() => {
          // todo
          done();
        }, 1000);
      }
    },
  };
</script>
